<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Web music downloader</title>
    <link rel="stylesheet" href="../../lib/font-awesome-4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="../../../node_modules/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" href="style.css">

    <script>
        window.jQuery = window.$ = require("jquery");
        require("popper.js");
        require("bootstrap");
    </script>
</head>
<body>
<div id="root-container">
    <form id="url-input-bar">
        <a href="#" id="btn-donate" class="btn btn-dark"><span class="fa fa-wechat"></span></a>
        <div style="width: 5px"></div>
        <div class="btn-group" role="group">
            <a href="#" class="btn btn-dark btn-back"><span class="fa fa-angle-left"></span></a>
            <a href="#" class="btn btn-dark btn-forward"><span class="fa fa-angle-right"></span></a>
        </div>
        <div style="width: 5px"></div>
        <div class="header">网址</div>
        <input name="url" id="url-input">
        <div style="width: 5px"></div>
        <button type="submit" class="btn btn-dark">
            <span class="fa fa-arrow-right"></span>
        </button>
    </form>
    <webview id="webview" allowpopups></webview>
    <div class="network-monitor">
        <div class="network-monitor-header">
            <div style="font-weight: bold;">网络监视器</div>
            <div style="flex: 1;"></div>
            <div>下载目录</div>
            <input type="text" readonly id="save-dir">
            <div class="btn-group" role="group">
                <a href="#" class="btn btn-dark btn-sm" id="btn-browse-for-save-dir">
                    <span class="fa fa-folder-open"></span>
                </a>
                <a href="#" class="btn btn-dark btn-sm" id="btn-show-save-dir-in-local-explorer">
                    <span class="fa fa-eye"></span>
                </a>
            </div>
            <div style="width: 5px;"></div>
            <a class="btn btn-dark btn-sm" href="#" id="btn-toggle-monitor-console"><span
                    class="fa fa-toggle-up"></span></a>
        </div>
        <textarea readonly class="network-monitor-output"></textarea>
    </div>
</div>

<script>
    // You can also require other files to run in this process
    require('./renderer.js')
</script>
</body>
</html>
